<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Data Renderers, AJAX and JSON Data</title>
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../jquery.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.ohlcRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.json2.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.ciParser.js"></script>
  
  <style type="text/css">
    div.jqplot-target {
        margin: 20px;
    }
  </style>

  <!-- END: load jqplot -->

<script class="code" type="text/javascript">$(document).ready(function(){  
    
    var jsonstr = '{"PriceTicks": [{"Price":5.5,"TickDate":"\/Date(1283745600000)\/"}, \
            {"Price":6.8,"TickDate":"\/Date(1283832000000)\/"}, \
            {"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}], \
        "PriceBars": [{"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0}, \
            {"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5}, \
            {"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]}';

    plot3 = $.jqplot('chart3', jsonstr, {
      title:'Custom JSON Format, JSON Encoded String',
      dataRenderer: $.jqplot.ciParser,
      axes: {
          xaxis: {
              renderer:$.jqplot.DateAxisRenderer,
              tickInterval: '1 day',
              tickOptions:{formatString:'%y/%m/%d'},
              min: '2010/09/05',
              max: '2010/09/09'
          }
      },
      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
    });
});</script>

<script class="code" type="text/javascript">$(document).ready(function(){ 
    
    var jsonobj = {"PriceTicks":[
            {"Price":5.5,"TickDate":"\/Date(1283745600000)\/"},
            {"Price":6.8,"TickDate":"\/Date(1283832000000)\/"},
            {"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}],
        "PriceBars":[
            {"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0},
            {"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5},
            {"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]
    };
  
    plot4 = $.jqplot('chart4', jsonobj, {
      title:'Custom JSON Format, JSON Object',
      dataRenderer: $.jqplot.ciParser,
      axes: {
          xaxis: {
              renderer:$.jqplot.DateAxisRenderer,
              tickInterval: '1 day',
              tickOptions:{formatString:'%y/%m/%d'},
              min: '2010/09/05',
              max: '2010/09/09'
          }
      },
      series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
    });
});</script>
  
<script type="text/javascript">    
    $(document).ready(function(){
        $('script.code').each(function(index) {
            $('pre.code').eq(index).text($(this).html());
        });
        $('script.common').each(function(index) {
            $('pre.common').eq(index).html($(this).html());
        });
        $(document).unload(function() {$('*').unbind(); });
    });
</script>

  </head>
  <body>
<?php include "nav.inc"; ?>
<p>JSON data formatted according the the City Index API spec can be read in directly by jqPlot thorugh the use of the dataRenderer option and a custom ciParser data renderer.  The ciParser data renderer will translate either a JSON encoded string or JSON object.</p>

<p>To use the the ciParser, include the <code>jqplot.json2.js</code> and <code>jqplot.ciParser.js</code> files.  Specify the <code>$.jqplot.ciParser</code> as the renderer in the plot's "dataRenderer" option.  The City Index JSON data can then be passed into the jqplot function as shown in the examples below:</p>

<p>Here, a stringified JSON data objects is passed into the jqplot function.</p>
<div id="chart3" style="height:200px; width:400px;"></div>
<pre class="code"></pre>
<p>This example uses the same City Index data format, but passes in a JSON object instead of a string.</p>
<div id="chart4" style="height:200px; width:400px;"></div>
<pre class="code"></pre>
  </body>
</html>